<template>
  <div class="MiniLogin">
    <x-gantt data-id="index"  :data="dataList" @move-slider="onMoveSlider">
      <x-gantt-column label="序号" prop="index" />
      <x-gantt-column prop="name" />
      <x-gantt-column label="时间">
        <x-gantt-column prop="startDate" />
        <x-gantt-column prop="endDate" />
      </x-gantt-column>
      <XGanttSlider
        prop="startDate"
        bg-color="orange"
        :move="true"
        :resize-left="true"
        :resize-right="true"
      >
        <template v-slot:content="{row, $index, level}">
          <div :style="{backgroundColor: row.color,color:'#fff',borderRadius:'4px'}" >
            {{ row.name }}
          </div>
        </template>
      </XGanttSlider>
    </x-gantt>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  interface MyDataObject {
     dataList: object[]; 
   }
  const dataList = ref<MyDataObject>([]);
  let id = 0;
  function onAdd() {
    dataList.value.push({
      index: ++id,
      startDate: new Date(2024, 5, id),
      endDate: new Date(2024, 5, id + 5),
      color: '#f6012' + id,
      list:[
        {name:'t' + id},
        {name:'t2' + id},
        {name:'t3' + id},
      ]
    });
  }

  for (let i = 0; i < 10; i++) {
    onAdd();
  }
  console.log(dataList.value);
  
  const onMoveSlider = (data) =>{
    console.log(data[0].row);
    
  }
  const rowClick = (data:any) => {
    console.log('rowClick',data);
  }
  // const clickRow = (data:object) => {
  //   console.log('rowClick',data);
  // }
</script>
<style scoped>
  /* @import url(); 引入css类 */
</style>
